<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM : window</title>

    <style type="text/css">
        div { height: 200px ; line-height: 200px ; text-align: center ; font-size: 50px ; }
        .odd{ background: #9696fa ; }
        .even{ background: #fa9696 ; }
    </style>

</head>
<body>
    <script type="text/javascript">
        // 获得HTML文档上的body元素
        let body = document.querySelector( 'body' );
        
        for( let i = 1 ; i < 100 ; i++ ){
            // 创建一个div元素 ( HTMLDivElement实例 )
            let node = document.createElement( 'div' );
            // 为新创建的元素添加 class name
            node.classList.add( i % 2 == 0 ? 'even' : 'odd' );
            // 为新创建的元素设置文本内容
            node.innerHTML = i ;
            // 将新创建的 div 元素添加到 body 内部的末尾
            body.appendChild( node );
        }

        // 在 body 上添加一堆子元素后再获取其 offsetHeight
        const height = body.offsetHeight ;
        console.log( height );

        let unit = 1 ; // 每次移动的距离
        let delay = 10 ; // 两次移动间隔时间
        let yOffset = 0 ; // 距离顶端的偏移量

        let myScroll = function(){
            yOffset += unit ;
            console.log( yOffset );
            // 让整个页面在x轴、y轴方向上滚动到指定位置
            scrollTo( 0 , yOffset ); // window.scrollTo( x , y )
            if( yOffset >= height ) {
                clearInterval( timer );
            } 
        }

        // 让整个页面向下滚动
        let timer = setInterval( myScroll , delay );
    </script>
</body>
</html>